<template>
  <a-popover trigger="click" ref="selectMulRef" position="bl" @popup-visible-change="changePopup">
    <template #content>
      <div class="select-mul">
        <div class="header">
          <a-input v-model="filterVal" style="margin-bottom: 10px" placeholder="搜索内容" />
          <a-checkbox v-model="checkedAll" :indeterminate="indeterminate" value="1" @change="changeCheckAll">全选</a-checkbox>
        </div>
        <a-scrollbar style="max-height: 240px; overflow-y: auto">
          <a-checkbox-group v-model="editVal">
            <template v-for="(option, s) in selectList" :key="s">
              <div class="checkbox-item">
                <a-checkbox :value="option.value">{{ option.label }}</a-checkbox>
              </div>
            </template>
          </a-checkbox-group>
        </a-scrollbar>
        <div class="footer">
          <a-space>
            <a-button size="mini" @click="cancel">取消</a-button>
            <a-button size="mini" type="primary" @click="confirm">确认</a-button>
          </a-space>
        </div>
      </div>
    </template>
    <a-select v-model="selectVal" :popup-visible="false" :options="info.optionItems" :style="{ minWidth: info.width + 'px' }" :placeholder="info.placeholder || info.label" multiple :max-tag-count="1" allow-clear :allow-search="false" @change="changeSelect" />
  </a-popover>
</template>
<script setup lang="ts">
  import { PropType, computed, ref, watch, watchEffect } from 'vue'
  import { FilterTableItem } from '@/types/components'
  import { cloneDeep } from 'lodash-es'

  const props = defineProps({
    info: {
      type: Object as PropType<FilterTableItem>,
      default: () => {},
    },
    defaultVal: {
      type: Array,
      default: () => [],
    },
  })
  const selectVal = ref<Array<any>>([])
  const editVal = ref<Array<any>>([])
  const filterVal = ref('')
  const emit = defineEmits(['change', 'update:modelValue'])
  const indeterminate = ref(false)
  const checkedAll = ref(false)
  const selectMulRef = ref()
  const selectList = computed(() => {
    let list = cloneDeep(props.info.optionItems) || []
    let newList = filterVal.value ? list.filter((el: any) => el.label?.indexOf(filterVal.value) > -1) : list
    return newList?.length > 50 ? newList.slice(0, 50) : newList
  })

  function changePopup(type: boolean) {
    if (type) {
      editVal.value = [...(selectVal.value || [])]
      filterVal.value = ''
    }
  }
  function changeCheckAll(status: any) {
    if (status) {
      editVal.value = selectList.value?.map((el) => el?.value || '') || []
    } else {
      editVal.value = []
    }
  }
  watch(editVal, (newVal) => {
    if (!newVal?.length) {
      indeterminate.value = false
      checkedAll.value = false
    } else if (newVal?.length === selectList.value?.length) {
      indeterminate.value = false
      checkedAll.value = true
    } else {
      indeterminate.value = true
      checkedAll.value = false
    }
  })
  watchEffect(() => {
    selectVal.value = [...(props.defaultVal || [])]
  })

  function cancel() {
    editVal.value = [...(selectVal.value || [])]
    selectMulRef.value.handlePopupVisibleChange(false)
  }
  function confirm() {
    emit('change', editVal.value)
    selectMulRef.value.handlePopupVisibleChange(false)
  }
  function changeSelect() {
    editVal.value = [...(selectVal.value || [])]
    confirm()
  }
</script>
<style lang="less" scoped>
  :deep(.arco-trigger-popup) {
    .arco-popover-popup-content {
      padding: 5px;
    }
  }
  .select-mul {
    width: 240px;
    .header {
      border-bottom: 1px solid var(--color-border);
      margin-bottom: 10px;
    }
    .arco-checkbox-group {
      width: 100%;
    }
    .checkbox-item {
      font-size: 12px;
      padding: 3px 0;
      &:hover {
        background-color: #f2f3f5;
      }
      .arco-checkbox {
        width: 100%;
        margin: 0;
      }
    }
    .footer {
      border-top: 1px solid var(--color-border);
      text-align: right;
      padding-top: 10px;
    }
  }
</style>
